import React, { useState, useEffect } from "react";
import { Button } from "antd";
import { useLocation } from "react-router-dom";
import ChatContainer from "../components/ChatContainer";
import './Home.css';

export default function Home() {
    const [showChat, setShowChat] = useState(false);
    const [templateInfo, setTemplateInfo] = useState(null);
    const location = useLocation();

    // 检查是否从模板页面跳转过来
    useEffect(() => {
        if (location.state?.template) {
            setTemplateInfo(location.state);
            setShowChat(true);
        }
    }, [location.state]);

    const handleStartChat = () => {
        setShowChat(true);
    }

    const handleGoAbout = () => {
        window.location.href = '/about'
    }

    if (showChat) {
        return <ChatContainer templateInfo={templateInfo} />;
    }

    return (
        <div id="home">
            {/* 网站描述标题和内容 */}
            <div className="description">
                <div className="description-title">AI提示词生成器-快速创建完美提示词</div>
                <div className="description-content">为ChatGPT、Claude、Gemini等AI模型生成优化提示词,运用先进提示词工程技术,将您的想法转化为强大的提示词,每次都能获得更好的AI回答效果</div>
                <div className="button-group">
                    <Button type="primary" onClick={handleStartChat}>开始对话</Button>
                    <Button onClick={handleGoAbout}>了解更多</Button>
                    <Button type="dashed" onClick={() => navigate('/admin/login')}>管理员入口</Button>
                </div>
                <div className="tips">
                    <img src="/src/assets/礼物.png" alt="礼物" width={16} className="tips-icon" />
                    <span className="tips-text">免费提示词生成器可用</span>
                </div>
                
                <div>
                    <div >
                            <p>感谢你的使用！</p>
                    </div>
                </div>
                
            </div>
        </div>
    )
}